<template>
  <div class="hu-check-popup">
    <slot name="header"></slot>
    <!-- 显示全部已选中数据的弹框 -->
    <div v-if="title > 0" style="margin-bottom: 15px; text-align: center">
      已选中
      <span class="text-blue">{{ title }}</span>
      项
    </div>
    <div>
      <van-row>
        <van-col
          v-for="item in showMember"
          :key="item[props.id]"
          :style="{ width: `${100 / (parseInt(showCount) + 1)}%` }"
        >
          <HuNameImg
            :name="item[props.name]"
            :portraitURL="item[props.portraitURL] || defaultImage"
            layout="vertical"
            imageWidth="32"
          />
        </van-col>
        <!-- 展开按钮 -->
        <van-col
          span="3"
          @click="isOpen = true"
          :style="{ width: `${100 / (parseInt(showCount) + 1)}%` }"
        >
          <van-icon name="ellipsis" />
        </van-col>
      </van-row>
    </div>
    <van-popup
      v-model="isOpen"
      position="bottom"
      closeable
      close-icon="close"
      :style="{ height: '80%' }"
      get-container="body"
    >
      <div v-if="title > 0" style="margin: 16px">
        已选中
        <span class="text-blue">{{ title }}</span>
        项
      </div>
      <div>
        <HuCheckList
          ref="HuCheckList"
          position="right"
          :has-all-check="false"
          svg-icon="reduce"
          :defaultImage="defaultImage"
          :list="selecteds"
          :props="props"
          @change="changeList"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import HuNameImg from "./HuNameImg";
import defaultImg from "@/img/defaultAvatar.jpg";
import HuCheckList from "./HuCheckList";

export default {
  name: "HuCheckPopUp",
  components: { HuCheckList, HuNameImg },
  props: {
    // 已选中人员
    selecteds: {
      type: Array,
      default: () => [],
    },
    // 在 HuCheckList 组件中所传列表的自定义属性名,具体见组件内说明所示
    props: {
      type: Object,
      default: () => {
        return {
          name: "name",
          id: "id",
          portraitURL: "portraitURL",
        };
      },
    },
    // 默认头像
    defaultImage: {
      type: String,
      default: defaultImg,
    },
    // 底部展示几个数据
    showCount: {
      type: [Number, String],
      default: 7,
    },
  },
  data() {
    return {
      title: "",
      isOpen: false, // 下拉框是否打开
      showMember: [], // 显示在页面下的已选人员
    };
  },

  watch: {
    // 监听已选中数据
    selecteds: {
      handler(nd) {
        this.showMember = [];
        this.title = nd.length;
        // 当已选人数超过 showCount 个时，只显示前 showCount 个
        nd.forEach((element) => {
          if (this.showMember.length < parseInt(this.showCount)) {
            this.showMember.push(element);
          }
        });
        // 当已选人数为0时，关闭弹出框
        if (nd.length == 0) {
          this.isOpen = false;
        }
      },
      deep: true,
      immediate: true,
    },
    isOpen(nd) {
      // 监听下拉窗口打开
      if (nd) {
        setTimeout(() => {
          // 只有打开后才会渲染里面的元素，所以加个延迟
          if (this.$refs.HuCheckList) {
            // 选中所有
            this.$refs.HuCheckList.toggleAll(true);
          }
        }, 100);
      }
    },
  },
  methods: {
    // 当复选框绑定值变化时
    changeList(val) {
      // 数据发生了改变, 更新已选数据
      if (val.length != this.selecteds.length) {
        this.$emit("update:selecteds", val);
        this.$emit("change", val);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.hu-check-popup {
  background-color: @white;
  border-top: 1px solid #fafafa;
  padding: 10px 20px;
  text-align: center;
}
.hu-ellipsis {
  font-size: 30px;
  text-align: center;
  color: #515151;
}
</style>
